<!-- 
 * @Author: dountwang 2865372088@qq.com
 * @Date: 2022-06-06 11:22:30
 * @LastEditors: dountwang 2865372088@qq.com
 * @LastEditTime: 2022-07-27 14:40:20
 * @FilePath: \保险客户管理\clientmanage\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="jm">
    <nav>
      <div id="such">
        <el-input placeholder="权限组名称" style="width:200px" v-model="suchval"></el-input>
        <el-button type="primary" @click="such">查询</el-button>
      </div>
      <div id="add">
        <el-button type="primary" @click="dialogFormVisible = true"><i class="el-icon-plus"></i>新增</el-button>
        <el-dialog title="新增权限" :visible.sync="dialogFormVisible" width="500px">
          权限组名称：
          <el-input v-model="menu.name" style="width:200px"></el-input>
          <el-checkbox v-model="menu.status"> 是否禁用</el-checkbox>
          <el-table :data="NArray" @selection-change="handleSelectionChange">
            <el-table-column prop="id" label="序号">
            </el-table-column>
            <el-table-column prop="name" label="菜单名称">
            </el-table-column>
            <el-table-column type="selection" label="权限列表">
            </el-table-column>
          </el-table>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false; add()">保存</el-button>
          </div>
        </el-dialog>

      </div>
    </nav>
    <div style="overflow: hidden;">
      <el-table ref="multipleTable" :data="Arr" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" :header-cell-style="{ background: 'black' }">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="权限组名称" align="center">
        </el-table-column>
        <el-table-column prop="created" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" align="center">
          <template slot-scope="scoped">
            <span>{{ scoped.row.status ?'是':"否"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序位" align="center">
          <span><i class="el-icon-sort"></i></span>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="dialogFormVisibles = true;beforeup(scope.row)" type="text" size="small">
              编辑
            </el-button>
            <el-dialog title="修改权限" :visible.sync="dialogFormVisibles" width="500px">
              权限组名称：
              <el-input v-model="upmenu.name" style="width:200px"></el-input>
              <el-checkbox v-model="upmenu.status"> 是否禁用
              </el-checkbox>
              <el-table :data="NArray" @selection-change="handleSelectionChanges">
                <el-table-column prop="id" label="序号">
                </el-table-column>
                <el-table-column prop="title" label="菜单名称">
                </el-table-column>
                <el-table-column type="selection" label="权限列表">
                </el-table-column>
              </el-table>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisibles = false; afterup()">保存</el-button>
              </div>
            </el-dialog>
            <el-button @click="del(scope.row.id)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal" align="center">
        </el-pagination>
      </div>

    </div>
  </div>


</template>

<script>
import serve from '@/service/jurise'

export default {
  name: 'Display',

  data() {
    return {

     
      
      
      NArray:[],
      Arr: [],
      suchval: "",
      
      
      // 当前页数
      currentPage: 1,
      // 每页默认显示条数
      pageSize: 7,
      // 总条数
      pageTotal: 20,
      multipleSelection: [],
      dialogFormVisibles: false,
      dialogFormVisible: false,
    
      formLabelWidth: '120px',
      menu: {
        name: '',
        status: false,
        checkList: [],
        checklists:[]
      },
      upmenu: {
        id:'',
        name: '',
        status: false,
        checkList: [],
      }
    }
  },

  mounted() {
      this.Display()
  }
  ,

  methods: {

    Display() {
      // serve.getlist().then(res => {
      //   //console.log(res.data);
      //   //console.log(9999);
      // })
      
      this.NArray = this.$store.state.NavArray
      // //console.log(this.$store.state.NavArray);

      
    // this.$axios({
    //     method: 'get',
    //   url: '/tianfuHealth/role/findAll',
    // }).then((res) => {
    //     this.Arr=res.data.data
    //   // //console.log(res.data);
    //   this.pageTotal = res.data.data.lenget
    // })
    this.$axios({
        method: 'get',
      url: '/role/list',
      params: { page: this.currentPage, limit: this.pageSize }
    }).then((res) => {
        this.Arr=res.data
      //console.log(res);
      this.pageTotal = res.count
    })
        
    },


    add() {
      this.menu.status = this.menu.status ? '1' : '0'
      
      this.menu.checkList = String(this.menu.checkList)
      let menu = {
        created: "2022-07-20T13:37:53.759Z",
        id: 0, 
        name: this.menu.name,
        menuIds: this.menu.checkList,
        status: this.menu.status,
        updated: "2022-07-20T13:37:53.759Z"
      }
      // //console.log(menu);


      this.$axios({
        method: 'post',
        url: '/role/add',
        data: menu
      }).then(res => {
        // //console.log(res.data);
        this.Display();
      })
     
     
    }
,

    del(id) {
      this.$axios({
        method: 'get',
        url: '/role/delete',
        params:{id}
      }).then((res) => {
       
        // //console.log(res.data);
        this.Display();
      })
    },
    such() {
      // //console.log(this.suchval);
      let id = this.suchval
      this.$axios({
        method: 'get',
        url: '/role/list',
        params: { page: this.currentPage, limit: this.pageSize,name:this.suchval }
      }).then((res) => {
        this.Arr = res.data
        //console.log(res);
        this.pageTotal = res.count
      })
    
    },
    beforeup(row) {
      // //console.log(row);
      this.upmenu.name = row.name
      this.upmenu.id = row.id
      this.upmenu.status = (row.status = 1 ? true : false)
    },

    afterup() {
      this.upmenu.status = this.upmenu.status ? '1' : '0'

      this.upmenu.checkList = String(this.upmenu.checkList)
      let upmenu = {
        created: "2022-07-20T13:37:53.759Z",
        id: this.upmenu.id,
        name: this.upmenu.name,
        menuIds: this.upmenu.checkList,
        status: this.upmenu.status,
        updated: "2022-07-20T13:37:53.759Z"
      }
      // //console.log(upmenu);
      this.$axios({
        method: 'post',
        url: '/role/update',
        data: upmenu
      }).then(res => {
        //console.log(res.data);
        this.Display();
      })
    },
  

    handleSelectionChange(val) {
      this.menu.checklists=val
      // //console.log(val);
      this.menu.checkList=[]
      for (let i in val){
        this.menu.checkList.push(val[i].id)
      }
      // //console.log(String(this.menu.checkList));
    },
    handleSelectionChanges(val) {
      // //console.log(val);
      this.upmenu.checkList = []
      for (let i in val) {
        this.upmenu.checkList.push(val[i].id)
      }
      // //console.log(String(this.upmenu.checkList));
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage=val
      //console.log(`当前页: ${val}`);
    }
  },

    
  }


  




</script>
<style scoped>
nav {
  background-color: #FFFFFF;
  padding: 20px 0 10px 0;
  margin-bottom: 10px;
}

#such {
  background-color: #FFFFFF;
  /* margin-left: 30px; */
}

#such>button {
  margin-left: 20px;
}

#add {
  color: yellow;
  margin: 10px 0 10px 0px;
}

#btn {
  margin-left: 20px;
}

#jm {

  margin-left: 20px;
}

h3 {
  margin-left: 20px;
}
</style>